<template>
  <div class="users-base-wrapper">
    <div class="function-details-layout">
      <el-row style="text-align: left; margin-bottom: 16px">
        <el-button type="primary" size="mini" @click="handleSave">保存</el-button>
      </el-row>
      <el-form :rules="rules" ref="formRef" size="mini" :model="formData" label-width="320px">
        <el-form-item label="受试者编号格式：" prop="subjectNumWay">
          <el-select v-model="formData.subjectNumWay" placeholder="请选择" style="width: 240px">
            <el-option v-for="item in sectionList" :key="item.value" :label="item.text" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="访视提醒功能开启：">
          <el-radio-group v-model="formData.visitFunctionOpen">
            <el-radio label="1" @click.native.prevent="handleRadioClick('1', 'visitFunctionOpen')">开启</el-radio>
            <el-radio label="0" @click.native.prevent="handleRadioClick('0', 'visitFunctionOpen')">关闭</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提醒访视：">
          <el-radio-group v-model="formData.remindWay">
            <el-radio label="1" @click.native.prevent="handleRadioClick('1', 'remindWay')">邮箱</el-radio>
            <el-radio label="2" @click.native.prevent="handleRadioClick('2', 'remindWay')">手机短信</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="提醒范围：">
          <el-radio-group v-model="formData.remindScope">
            <el-radio label="1" @click.native.prevent="handleRadioClick('1', 'remindScope')">本人</el-radio>
            <el-radio label="2" @click.native.prevent="handleRadioClick('2', 'remindScope')">中心人员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="日期格式：" prop="dateWay">
          <el-radio-group v-model="formData.dateWay">
            <el-radio label="1" @click.native.prevent="handleRadioClick('1', 'dateWay')">YYYY-MM-DD</el-radio>
            <el-radio label="2" @click.native.prevent="handleRadioClick('2', 'dateWay')">DD-MM-YYYY</el-radio>
            <el-radio label="3" @click.native.prevent="handleRadioClick('2', 'dateWay')">MM-DD-YYYY</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="字符日期/字符时间空值选择器：" prop="charDate">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.charDate"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="日期时间到秒提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.dateSecRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="日期时间到分提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.dateMinRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="日期时间到日提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.dateDayRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="日期时间到月提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.dateMouRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="时间到秒提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.timeSecRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="时间到分提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.timeMinRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="时间到时提醒字符：">
          <el-input
            style="width: 240px"
            placeholder="请输入"
            v-model="formData.timeHourRemind"
            maxlength="200"
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  name: 'subject-params',

  data() {
    return {
      functionParamsData: [],
      formData: {
        subjectNumWay: '1',
        visitFunctionOpen: '',
        remindWay: '',
        remindScope: '',
        dateWay: '',
      },
      rules: {
        subjectNumWay: [{ required: true, message: '请选择', trigger: 'blur' }],
        // visitFunctionOpen: [{ required: true, message: '请选择', trigger: 'blur' }],
        // remindWay: [{ required: true, message: '请选择', trigger: 'blur' }],
        // remindScope: [{ required: true, message: '请选择', trigger: 'blur' }],
        dateWay: [{ required: true, message: '请选择', trigger: 'blur' }],
        charDate: [{ required: true, message: '请选择', trigger: 'blur' }],
      },
      sectionList: [
        {
          text: '手动填写',
          value: '1',
        },
        {
          text: '中心+3位',
          value: '3',
        },
        {
          text: '中心+4位',
          value: '4',
        },
        {
          text: '中心+5位',
          value: '5',
        },
      ],
      loading: false,
    }
  },
  mounted() {
    this.projectId = localStorage.getItem('sys-project-id') || ''
    this.getSubjectParamsData()
  },

  methods: {
    ...mapActions('eCRFDesign', ['qrySubjectParamsData', 'addSubjectParamsData', 'editSubjectParamsData']),

    handleRadioClick(e, key) {
      e === this.formData[key] ? (this.formData[key] = '') : (this.formData[key] = e)
    },

    // 查询功能参数详情
    getSubjectParamsData() {
      const params = {
        projectId: this.projectId,
      }
      this.qrySubjectParamsData({ params }).then(res => {
        const { data, code, message } = res
        if (code === 200) {
          this.functionParamsData = data
          if (data) {
            this.formData = { ...data }
          }
        } else {
          this.$message.error(message || '服务异常，请稍后重试!')
        }
      })
    },

    // 保存
    handleSave() {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.loading = true
          const data = {
            ...this.formData,
            projectId: this.projectId,
          }
  
          if (!this.functionParamsData) {
            this.addSubjectParamsData({ data }).then(res => {
              const { code } = res
              if (code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                this.getSubjectParamsData()
              }
              this.loading = false
            })
          } else {
            this.editSubjectParamsData({ data }).then(res => {
              const { code } = res
              if (code === 200) {
                this.$message({
                  message: '保存成功',
                  type: 'success',
                })
                this.getSubjectParamsData()
              }
              this.loading = false
            })
          }
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import './index.scss';
</style>
